<template>
	<view class="wrap">	
		<u-search placeholder="请输入公告名称" bg-color="#fff" v-model="keyword"></u-search>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goToParse">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.text}}
					</view>
					<view class="demo-shop">
						{{item.date}}
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goToParse">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.text}}
					</view>
					<view class="demo-shop">
						{{item.date}}
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				scrollTop: 0,
				keyword: '',
				list: [
					{
						title: '东莞移动美发室管理办法',
						text: '为进一步加强和完善公司美发室的管理，提高服务质量，特制订本办法。',
						date: '2018年9月',
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					},
					{
						title: '关于美发室预约功能的说明',
						text: '预约前请详细阅读本说明，避免因不符合规定导致无法正常服务。',
						date: '2018年9月',
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						title: '2018年美发室运营情况通报',
						text: '2018年美发室从员工需求出发，为员工提供了周到、贴心的服务。',
						date: '2018年9月',
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
				]
			}
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			/**
			 * 加载更多
			 */
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			/**
			 * 跳转到公告详情页面
			 */
			goToParse() {
				this.$tab.navigateTo(`/pages/home/parse`)
			},
			/**
			 * 跳转到公告页面
			 */
			goToNotice() {
				this.$tab.navigateTo(`/pages/home/notice`)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		margin: 20rpx;
		.grid-text {
			font-family: 'FontAwesome Regular', 'FontAwesome';
			font-weight: bold;
			font-size: 18px;
			margin-bottom: 20rpx;
		}
		.u-section {
			margin-top: 40rpx;
		}
		.demo-warter {
			border-radius: 8px;
			margin: 5px;
			background-color: #ffffff;
			padding: 8px;
			position: relative;
		}
		
		.demo-title {
			font-size: 30rpx;
			margin-top: 5px;
			color: $u-main-color;
		}
		
		.demo-price {
			font-size: 30rpx;
			color: $u-tips-color;
			margin-top: 5px;
		}
		
		.demo-shop {
			font-size: 22rpx;
			color: $u-tips-color;
			margin-top: 5px;
		}
		.u-waterfall {
			position: relative;
			top: 15rpx;
		}
	}
</style>